<template>
  <div>
    <div class="pageBg">
      <div class="pageTitle">筛选条件</div>
      <QueryInlineForm :formConfiguration="formdata" ref="queryInlineForm" />
    </div>
    <div class="pageBg">
      <div class="pageTitle mb-24">日志列表</div>
      <t-table :data="tabelData" :loading="isLoading" @page-change="onPageChange" row-key="id" :columns="columns"
        :pagination="pagination" lazyLoad />
    </div>
  </div>
</template>

<script>
import QueryInlineForm from '@/components/queryInlineForm.vue';
export default {
  name: '',
  data() {
    return {
      formdata: [
        {
          name: "账号名称",
          span: 2, //栅格布局24一行
          value: "",
          fromname: "username", //传入后端的名称
          type: "input",
          options: [],
          placeholder: "请输入店铺名称",
          labelWidth: "28",
          disabled: false
        },
        {
          name: "账号",
          span: 2, //栅格布局24一行
          value: "",
          fromname: "username", //传入后端的名称
          type: "input",
          options: [],
          placeholder: "请输入操作人",
          labelWidth: "28",
          disabled: false
        },
        {
          name: "操作时间",
          span: 2, //栅格布局24一行
          value: [],
          fromname: "time", //传入后端的名称
          type: "timer",
          separator: "-",
          labelWidth: "56",
          placeholder: ["开始时间", "结束时间"],
          valueType: "YYYY-MM-DD",
          disabled: false
        },
        {
          type: "button",
          span: 2,
          buttonArray: [
            {
              style: "",
              theme: "default",
              variant: "",
              bottonname: "重置",
              type: "button"
            },
            {
              style: "",
              theme: "primary",
              variant: "",
              bottonname: "搜索",
              type: "button"
            }
          ]
        }
      ],
      tabelData: [
        {
          id: 0,
          userAccount: "zzz",
          hotelName: "fdsjf",
          hotelStar: "fdsjf",
          signType: "dsad",
          auditStatus: "2021-2-1",
          auditPerson: "2024-3-1",
          state: 0
        },
        {
          id: 1,
          userAccount: "zzz",
          hotelName: "fdsjf",
          hotelStar: "fdsjf",
          signType: "dsad",
          auditStatus: "2021-2-1",
          auditPerson: "2024-3-1",
          state: 0
        },
        {
          id: 2,
          userAccount: "zzz",
          hotelName: "fdsjf",
          hotelStar: "fdsjf",
          signType: "dsad",
          auditStatus: "2021-2-1",
          auditPerson: "2024-3-1",
          state: 1
        },
        {
          id: 3,
          userAccount: "zzz",
          hotelName: "fdsjf",
          hotelStar: "fdsjf",
          signType: "dsad",
          auditStatus: "2021-2-1",
          auditPerson: "2024-3-1",
          state: 1
        }
      ],
      pagination: {
        current: 1,
        pageSize: 5,
        total: 4
      },
      columns: [
        {
          colKey: 'row-select',
          type: 'multiple',
          width: 64,
        },
        {
          title: '账号ID',
          ellipsis: true,
          colKey: 'id',
        },
        {
          title: '账号名称',
          ellipsis: true,
          colKey: 'userAccount',
        },
        {
          title: '账号',
          ellipsis: true,
          colKey: 'hotelName',
        },
        {
          title: '操作内容',
          ellipsis: true,
          colKey: 'hotelStar',
        },
        {
          title: '操作账号',
          ellipsis: true,
          colKey: 'signType',
        },
        {
          title: '操作人',
          colKey: 'auditStatus',
        },
        {
          title: '操作时间',
          ellipsis: true,
          colKey: 'auditPerson',
        },
      ],
      isLoading: false
    }
  },
  components: {
    QueryInlineForm
  },
  created() {
    //将事件挂载在formdata中
    this.formdata.forEach(element => {
      if (element.type == "button" || element.type == "button2") {
        element.buttonArray.forEach(item => {
          if (item.bottonname == "搜索") {
            item.callback = this.queryClick;
          }
          if (item.bottonname == "重置") {
            item.callback = this.reset;
          }
        });
      }
    });
  },
  methods: {
    onPageChange(val) {
      this.pagination.current = val.current
      this.pagination.pageSize = val.pageSize
    },
  },
}
</script>
<style lang='less' scoped></style>